<?php
echo $this->Html->script(array('jNice', 'fileuploader'));
echo $this->element("scroll_element", array("cache" => true));
?>
<div id="result">
    <?php echo $this->Session->flash(); ?>
    <div class="message" id="flashMessage" style="display: none"></div>
    <?php
    echo $this->Form->create('User', array('action' => 'edit', 'class' => 'jNice', 'type' => 'file'));
    echo $this->Form->input('id');
    ?>
    <div class="scollCont scroll-pane">
        <div class="padder">
            <div class="formBlock">
                <div class="uploadImg">
                    <h3 class="profileLabel">profile image</h3>
<!--                                    <div class="globalButtons"><span><span>UPLOAD COMPLETE</span></span></div>-->
                    <div id="profile_image"  style="height:80px">		
                        <noscript>			
                        <p>Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                        </noscript>         
                    </div>
                    <label generated="true" class="profileImage error" style="display: none"></label>      
                </div>
                <div class="uploadImg inspire">
                    <h3 class="profileLabel">INSPIRATION image</h3>
<!--                    <div class="globalButtons"><span><span>CHANGE</span></span></div>-->
                    <div id="inspiration_image" style="height:80px">		
                        <noscript>			
                        <p>Please enable JavaScript to use file uploader.</p>
                        <!-- or put a simple form for upload here -->
                        </noscript>         
                    </div>
                    <label generated="true" class="inspirationImage error" style="display: none"></label>
                </div>
                <div class="clear"></div>
                <div class="vision">
                    <h3 class="profileLabel">VISION</h3>
                    <div class="textAreaWrapper">
                        <div class="textAreaRight">
                            <div class="textAreaRptr">
                                <div class="textScroller" style="height:93px; width:853px;">
                                    <?php echo $this->Form->textarea('vision', array('div' => false, 'label' => false)); ?> 
                                </div>
                            </div>
                        </div>
                    </div>
                    <label class="UserVision error"></label>         
                    <h3 class="profileLabel">FOCUS AREAS</h3>
                    <div class="checkBoxes">                                        
                        <?php
                        foreach ($focus_areas as $key => $val) {
                            $checked = "";
                            if (isset($this->data['UserArea'])) {
                                foreach ($this->data['UserArea'] as $area) {
                                    if ($key == $area['focus_area_id']) {
                                        $checked = ' checked="checked"';
                                    }
                                }
                            }
                            ?>

                            <input type="checkbox" name="data[User][focus_area_id][]" value="<?php echo $key; ?>" <?php echo $checked; ?> /><label><?php echo $val; ?></label>
                        <?php } ?>       
                        <label generated="true" class="focusArea error" style="display: none"></label>
                        <div class="clear">&nbsp;</div>
                    </div>
                </div>
            </div>
            <ul class="chooseUser">

                <li><a href="#" class="userThumb71x61"><img src="../img/no-thumb-71x67.jpg" alt="" width="71" height="67" /></a><a href="#">John Doe</a></li>
                <li><a href="#" class="userThumb71x61"><img src="../img/no-thumb-71x67.jpg" alt="" width="71" height="67" /></a><a href="#">John Doe</a></li>
                <li><a href="#" class="userThumb71x61"><img src="../img/no-thumb-71x67.jpg" alt="" width="71" height="67" /></a><a href="#">John Doe</a></li>
                <li><a href="#" class="userThumb71x61"><img src="../img/no-thumb-71x67.jpg" alt="" width="71" height="67" /></a><a href="#">John Doe</a></li>
                <li><a href="#" class="userThumb71x61"><img src="../img/no-thumb-71x67.jpg" alt="" width="71" height="67" /></a><a href="#">John Doe</a></li>
                <li><a href="#" class="userThumb71x61"><img src="../img/no-thumb-71x67.jpg" alt="" width="71" height="67" /></a><a href="#">John Doe</a></li>
                <li><a href="#" class="userThumb71x61"><img src="../img/no-thumb-71x67.jpg" alt="" width="71" height="67" /></a><a href="#">John Doe</a></li>
                <li><a href="#" class="userThumb71x61"><img src="../img/no-thumb-71x67.jpg" alt="" width="71" height="67" /></a><a href="#">John Doe</a></li>
                <li><a href="#" class="userThumb71x61"><img src="../img/no-thumb-71x67.jpg" alt="" width="71" height="67" /></a><a href="#">John Doe</a></li>

            </ul>
        </div>
    </div>
    <button type="submit" class="saveInfo">SAVE</button>
</form>
</div> 
<script type="text/javascript">
    jQuery(document).ready(function(){        
        jQuery("form#UserEditForm").submit(function() {            
            jQuery(".error").html("");
            data=jQuery(this).serialize();
            url=jQuery(this).attr('action');  
            jQuery(this).ajaxStart(function() {
                jQuery(this).css({opacity:'0.5'});  
                //jQuery('<div id="loader"></div>').insertBefore(this);                    
            }).ajaxStop(function() {
                jQuery(this).css({opacity:'1'});
                // jQuery('<div id="loader"></div>').remove();
            }).ajaxError(function(a, b, e) {
                throw e;
            });
                
            jQuery.ajax({
                type: 'POST',
                url: url,
                data: data,
                success:function(data){
                    if(data.success){                        
                        jQuery(this).css({opacity:'0.5'});  
                        jQuery("#flashMessage").html(data.success).show().fadeIn("slow",function(){
                            setTimeout('disablePopup();',2000);
                        });
                        
                    }
                    if(data.errors.profile_image){                        
                        jQuery(".profileImage").html(data.errors.profile_image).show().fadeIn("slow");
                    }
                    if(data.errors.inspiration_image){                        
                        jQuery(".inspirationImage").html(data.errors.inspiration_image).show().fadeIn("slow");
                    }
                    if(data.errors.vision){                        
                        jQuery(".UserVision").html(data.errors.vision).show().fadeIn("slow");
                    }
                    if(data.errors.focus_area_id){                        
                        jQuery(".focusArea").html(data.errors.focus_area_id).show().fadeIn("slow");
                    }
                    
                },
                dataType: 'JSON'
            });
            return false; 
            
        });
        var uploader = new qq.FileUploader({
            element: document.getElementById('inspiration_image'),
            action: baseUrl+'users/upload',
            allowedExtensions:["jpeg", "gif", "jpg", "bmp"],
            params: {upload_dir:'inspiration_images'},
            debug: true
        });  
        var uploader2 = new qq.FileUploader({
            element: document.getElementById('profile_image'),
            action: baseUrl+'users/upload',
            allowedExtensions:["jpeg", "gif", "jpg", "bmp"],
            params: {upload_dir:'profile_images'},
            debug: true
        });
    });